<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>flower</title>
    <link th:href="@{layui/css/layui.css}" rel="stylesheet" />
    <style>
        .bgchange ul li:hover {
            background-color: #eeeeee;
            color: #009688;
        }
    </style>
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><span style="color: #FFB800;">FLOWER SING</span> </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--<ul class="layui-nav layui-layout-left">-->
        <!--<li class="layui-nav-item"><a href="">控制台</a></li>-->
        <!--<li class="layui-nav-item"><a href="">商品管理</a></li>-->
        <!--<li class="layui-nav-item"><a href="">用户</a></li>-->
        <!--<li class="layui-nav-item">-->
        <!--<a href="javascript:;">其它系统</a>-->
        <!--<dl class="layui-nav-child">-->
        <!--<dd><a href="">邮件管理</a></dd>-->
        <!--<dd><a href="">消息管理</a></dd>-->
        <!--<dd><a href="">授权管理</a></dd>-->
        <!--</dl>-->
        <!--</li>-->
        <!--</ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img"/>
                    flower
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black"  lay-shrink="all">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="index-nav-filter">
                <li class="layui-nav-item layui-nav-itemed">
                    <a  href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-murl="user/select" data-mid="11">用户管理</a></dd>
                        <dd><a href="javascript:;" data-murl="login.html" data-mid="22">列表二</a></dd>
                        <dd><a href="javascript:;" data-murl="index.html" data-mid="33">列表三</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                    </dl>
                </li>
                <!--<li class="layui-nav-item"><a href="">云市场</a></li>-->
                <!--<li class="layui-nav-item"><a href="">发布商品</a></li>-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!--内容主体区域-->
        <div class="layui-tab layui-tab-brief bgchange" lay-filter="index-content">
            <ul class="layui-tab-title layui-unselect layui-tab-close">
                <li class="layui-this" lay-id="00" ><span><i class="layui-icon">&#xe68e;</i>首页</span> </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe id="myFrameName" src="timeLog" name="myFrameName" style="width: 100%; height: 750px;" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © flowersing.com - 底部固定区域
    </div>
</div>
<script th:src="@{layui/layui.js}"></script>
<script >

    //JavaScript代码区域
    layui.use('element', function(){
        var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//        $(".bb").mousemove(function(){
//            $(".layui-this").css("background-color","#eeeeee");
//        });
//
//        $(".bb").mouseout(function(){
//            $(".layui-this").css("background-color","");
//        });



        $("body").on("click",".layui-tab-title li i.layui-tab-close",function(){
            var lay_id=$(this).parent().attr('lay-id');
            element.tabDelete('index-content', lay_id); //删除
        })
        element.on('nav(index-nav-filter)', function(elem){
            //Hash地址的定位
            var mid=$(elem).data('mid');
            var url=$(this).data('murl');
            var title=$(this).text();
            var is_show=false;
            /*<![CDATA[*/
            if(url != undefined && url != ''){
                /*]]>*/
                $(".layui-tab-title li").each(function(){
                    var lay_id=$(this).attr('lay-id');
                    console.log(url+':aaa--->'+lay_id);
                    if(mid == lay_id){
                        is_show=true
                    }
                })
                if(!is_show){
                    element.tabAdd('index-content', {
                        title: '<cite>'+title+'</cite><i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>'
                        ,content: '<iframe src="'+url+'" style="width: 100%; height: 750px;" frameborder="0"></iframe>'
                        ,id: mid
                    })
                }
                element.tabChange('index-content', mid); //切换到：用户管理
            }
        });
    });

</script>
</body>
</html>